// id 还有input 必填项 
$(function(){
    // 弹层对象
    var layer = layui.layer
    // 表单对象
    var form = layui.form

    /**** 1-获取所有的分类信息 ****/
    initArtCateList()

    function initArtCateList() {
        $.ajax({
            type: 'get',
            url: '/my/article/cates',
            success: function(res) {
                // console.log(res)
                // 判断
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                /**** 2-渲染分类数据到页面 ****/
                // 生成html字符串
                var htmlStr = template('list', res)
                $('tbody').html(htmlStr)
            }
        })
    }

    /**** 2-添加分类 ****/
    var addIndex = null;
    // 1-弹出来一个添加分类的模态框
    $('#btnAddCate').on('click', function() {
        addIndex = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            // content: '<h1>狗蛋</h1>'
            content: $('#dialog-add').html()
        });
    })
    // 2-注册表单提交事件（事件委托）
    $('body').on('submit', '#form-add', function(e) {
        // 阻止默认提交行为
        e.preventDefault()
        // 收集表单数据
        var data = $(this).serialize()
        // console.log(data)
        $.ajax({
            type: 'post',
            url: '/my/article/addcates',
            data,
            success: function(res) {
                // console.log(res)
                // 判断
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('添加分类成功', function() {
                    // 关闭模态框
                    layer.close(addIndex)
                    // 重新渲染分类信息
                    initArtCateList()
                })
            }
        })
    })

    /**** 3-编辑分类 ****/
    var editIndex = null;
    // 1-弹出一个编辑分类的模态框
    $('tbody').on('click', '.btn-edit', function() {
        editIndex = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '编辑文章分类',
            content: $('#dialog-edit').html()
        });
        // 获取分类的id
        var id = $(this).attr('data-id');
        // 2-获取分类的信息，渲染到表单
        $.ajax({
            type: 'get',
            url: '/my/article/cates/' + id, // id是url的地址的一部分
            success: function(res) {
                // console.log(res)
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // 给表单填充数据
                form.val('form-edit', res.data)
            }
        })
    })
    // 2-完成分类的编辑功能
    $('body').on('submit', '#form-edit', function(e) {
        e.preventDefault()
        var data = $(this).serialize()
        $.ajax({
            type: 'post',
            url: '/my/article/updatecate',
            data,
            success: function(res) {
                // console.log(res)
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('更新分类成功', function() {
                    // 关闭模态框
                    layer.close(editIndex)
                    // 重新渲染分类
                    initArtCateList()
                })
            }
        })
    })

    /**** 4-删除分类 ****/
    // 注册点击事件（委托）
    $('tbody').on('click', '.btn-delete', function() {
        // 获取分类的id
        var id = $(this).attr('data-id')
        console.log(id)

        // 询问
        layer.confirm('您确定要删除此分类吗?', { icon: 3, title: '提示' }, function(index) {
            //do something
            // 调接口
            $.ajax({
                type: 'get',
                url: '/my/article/deletecate/' + id,
                success: function(res) {
                    // console.log(res)
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    // 重新渲染分类
                    initArtCateList()
                }
            })
            layer.close(index);
        });
    })
})